<template>
  <input 
    type="text" 
    :value="username"
    @input="emit('update:username',(<HTMLInputElement>$event.target).value)"
  >
  <br>
  <input 
    type="text" 
    :value="userpwd"
    @input="emit('update:userpwd',(<HTMLInputElement>$event.target).value)"
  >
</template>

<script setup lang="ts" name="SelfInput">
// 接收父组件绑定的属性
// defineProps(["modelValue"])
// // 进行事件的接收
// const emit=defineEmits(["update:modelValue"])
// 绑定多个数据时
defineProps(["username","userpwd"])
// 进行事件的接收
const emit=defineEmits(["update:username","update:userpwd"]) 
</script>

<style scoped>
  input {
    border: 2px solid black;
    background-image: linear-gradient(45deg,red,yellow,green);
    height: 30px;
    font-size: 20px;
    color: white;
  }
</style>